border_1px(border-width=1px, border-color=#ccc, border-style=solid, radius=0)
  // 为边框位置提供定位参考
  position relative

  if border-width == 0
    border-width 0
  
  border-radius radius

  &::after
    // 用以解决边框layer遮盖内容
    pointer-events none
    position absolute
    z-index 999
    top 0
    left 0

    content "\0020"
    border-color border-color
    border-style border-style
    border-width border-width

    @media (max--moz-device-pixel-ratio: 1.49),(-webkit-max-device-pixel-ratio: 1.49),(max-device-pixel-ratio: 1.49),(max-resolution: 143dpi),(max-resolution: 1.49dppx)
      width 100%
      height 100%
      transform scale(1)
      if radius != 0
        border-radius radius * 1

    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
      width 200%
      height 200%
      transform scale(.5)
      if radius != 0
        border-radius radius * 2

    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5),(min-resolution: 240dpi), (min-resolution: 2.5dppx)
      width 300%
      height 300%
      transform scale(.3333333)
      if radius != 0
        border-radius radius * 3
        
    transform-origin 0 0